<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>瓜田倒药水 - 彩色液体分类游戏</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="game-container">
        <!-- 游戏头部 -->
        <header class="game-header">
            <div class="score-info">
                <div class="level">关卡: <span id="current-level">1</span></div>
                <div class="score">得分: <span id="current-score">0</span></div>
                <div class="moves">步数: <span id="current-moves">0</span></div>
            </div>
            <h1 class="game-title">瓜田倒药水</h1>
        </header>

        <!-- 功能按钮区域 -->
        <div class="control-buttons">
            <button id="hint-btn" class="control-btn hint-btn" title="提示">
                <div class="btn-icon lightbulb-icon"></div>
                <span>提示</span>
                <div class="count-badge" id="hint-count">3</div>
            </button>
            
            <button id="help-btn" class="control-btn help-btn" title="求助">
                <div class="btn-icon help-icon"></div>
                <span>求助</span>
            </button>
        </div>

        <!-- 游戏区域 -->
        <div class="game-area">
            <div id="tubes-container" class="tubes-container">
                <!-- 试管将通过JavaScript动态生成 -->
            </div>
        </div>

        <!-- 底部控制按钮 -->
        <div class="bottom-controls">
            <button id="restart-btn" class="control-btn restart-btn" title="重新开始">
                <div class="btn-icon restart-icon"></div>
                <span>重新开始</span>
            </button>
            
            <button id="undo-btn" class="control-btn undo-btn" title="后退一步">
                <div class="btn-icon undo-icon"></div>
                <span>后退一步</span>
                <div class="count-badge" id="undo-count">3</div>
            </button>
            
            <button id="add-tube-btn" class="control-btn add-tube-btn" title="增加空杯">
                <div class="btn-icon tube-icon"></div>
                <span>增加空杯</span>
                <div class="count-badge" id="tube-count">1</div>
            </button>
        </div>

        <!-- 胜利对话框 -->
        <div id="win-dialog" class="win-dialog hidden">
            <div class="dialog-content">
                <h2>恭喜通关！</h2>
                <div class="win-stats">
                    <p>关卡: <span id="win-level"></span></p>
                    <p>得分: <span id="win-score"></span></p>
                    <p>步数: <span id="win-moves"></span></p>
                </div>
                <div class="dialog-buttons">
                    <button id="next-level-btn" class="dialog-btn primary">下一关</button>
                    <button id="replay-btn" class="dialog-btn secondary">重玩</button>
                </div>
            </div>
        </div>

        <!-- 提示对话框 -->
        <div id="hint-dialog" class="hint-dialog hidden">
            <div class="dialog-content">
                <h3>游戏提示</h3>
                <p id="hint-text"></p>
                <button id="close-hint-btn" class="dialog-btn primary">知道了</button>
            </div>
        </div>
    </div>

    <script type="module" src="js/game.js"></script>
</body>
</html>